<template>
  <div>
    <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>工序管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/gy' }">工序列表</el-breadcrumb-item>
      <el-breadcrumb-item>工艺制作</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">


      <el-form :model="searchForm" label-width="70px">
        <el-row :gutter="24">
          <el-col :span="6">图号:{{searchForm.code}}</el-col>
          <el-col :span="12">零件名称:{{searchForm.name}}</el-col>
          <el-col :span="6">数量:{{searchForm.num}}</el-col>
        </el-row>

      </el-form>

      <el-button type="primary" @click="addMaterialList()">添加原材料</el-button>

      <el-form :rules="rules" :model="materialList">
        <el-table :data="materialList"
                  border
                  style="width: 100%" >
          <el-table-column
            label="原材料"
            width="180">
            <template slot-scope="scope">

              <el-select v-model="materialList[scope.$index].materialId" placeholder="请选择" @change="count(scope.$index)">
                <el-option
                  v-for="item in materialList2"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>

            </template>
          </el-table-column>
          <el-table-column
            label="规格"
            width="180">
            <template slot-scope="scope">
              <el-select v-model="materialList[scope.$index].spec" placeholder="请选择活动区域">
                <el-option label="板" :value="0"></el-option>
                <el-option label="棒" :value="1"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            label="下料件数">
            <template slot-scope="scope">
              <el-form-item >
                <el-input v-model="num[scope.$index].mm" placeholder="请输入内容" @change="count(scope.$index),numyz(num[scope.$index].mm,'请输入下料件数')"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            label="下料尺寸">
            <template slot-scope="scope">
              <el-input v-model="materialList[scope.$index].bfLength" placeholder="请输入长"v-if="materialList[scope.$index].spec==0" @change="count(scope.$index),numyz(materialList[scope.$index].bfLength,'请输入长')"></el-input>
              <el-input v-model="materialList[scope.$index].bfWidth" placeholder="请输入宽" v-if="materialList[scope.$index].spec==0" @change="count(scope.$index),numyz(materialList[scope.$index].bfWidth,'请输入宽')"></el-input>
              <el-input v-model="materialList[scope.$index].bfHight" placeholder="请输入高" @change="count(scope.$index),numyz(materialList[scope.$index].bfHight,'请输入高')"></el-input>
              <el-input v-model="materialList[scope.$index].bfDiam" placeholder="请输入直径" v-if="materialList[scope.$index].spec==1" @change="count(scope.$index),numyz(materialList[scope.$index].bfDiam,'请输入直径')"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="产品尺寸">
            <template slot-scope="scope">
              <el-input v-model="materialList[scope.$index].afLength" placeholder="请输入长"v-if="materialList[scope.$index].spec==0"></el-input>
              <el-input v-model="materialList[scope.$index].afWidth" placeholder="请输入宽" v-if="materialList[scope.$index].spec==0"></el-input>
              <el-input v-model="materialList[scope.$index].afHight" placeholder="请输入高"></el-input>
              <el-input v-model="materialList[scope.$index].afDiam" placeholder="请输入直径" v-if="materialList[scope.$index].spec==1"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="产品面积（cm2）">
            <template slot-scope="scope">
              <el-input v-model="materialList[scope.$index].afArea" placeholder="请输入内容"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="产品重量(kg)">
            <template slot-scope="scope">
              <el-input v-model="materialList[scope.$index].afWeight" placeholder="请输入内容"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="delMaterialList(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--间隔-->
        <el-row class="box"></el-row>
        <!--添加工序按钮-->
        <el-row>
          <el-button type="primary" @click="addProcessList()">添加工序</el-button>
        </el-row>
        <!--工序列表信息-->
        <el-table
          :data="processList"
          border
          style="width: 100%">
          <el-table-column
            label="工序名称">
            <template slot-scope="scope">
              <el-select v-model="processList[scope.$index].processId" placeholder="请选择">
                <el-option
                  v-for="item in processList2"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            label="准备工时">
            <template slot-scope="scope">
              <el-input v-model="processList[scope.$index].preWorkHour" placeholder="请输入准备工时" @blur="numyz(processList[scope.$index].preWorkHour,'请输入准备工时')"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="单件时间">
            <template slot-scope="scope">
              <el-input v-model="processList[scope.$index].sgWorkHour" placeholder="请输入单价时间" @blur="numyz(processList[scope.$index].sgWorkHour,'请输入单件时间')"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="delProcessList(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <!--间隔-->
      <el-row class="box"></el-row>
      <el-row class="box"></el-row>
      <!--按钮-->
      <div align="right">
        <el-row>
          <el-button type="primary" @click="offer()" :disabled="disoffer">确定</el-button>
          <el-button type="primary" @click="call()">取消</el-button>
        </el-row>
      </div>


    </el-card>
  </div>
</template>

<script>
  export default {
    name: "ProcessWork",
    data(){
      return{
        disoffer:true,
        searchForm:{},
        addMateria:[],
        addDrocess:[],
        materialList:[],
        materialList2:[],
        num:[],
        dd:null,
        price:null,
        processList:[],
        processList2:[],
        materialAndProcess:{
          item:{},
          material:[],
          process:[]
        },
        orderItemId:'',
        mm:0,
        rules:{
          mm:{ required:true,message:"必填字段",trigger:'blur'},
        }
      }
    },
    methods:{
      //添加行
      addMaterialList:function () {
        var orderItemId=this.$route.query.id;
        this.materialList.push({afLength:null,afWidth:null,afHight:null,afDiam:null,afWeight:null,materCost:null,orderItemId:orderItemId,mm:0})
        this.num.push({mm:null})
      },
      //删除原材料行
      delMaterialList:function (index) {
        this.materialList.splice(index,1)
        this.num.splice(index,1)
      },
      //添加工序行
      addProcessList:function () {
        var orderItemId=this.$route.query.id;
        this.processList.push({orderItemId:orderItemId})
      },
      //删除工序行
      delProcessList:function (index) {
        this.processList.splice(index,1)
      },
      //查询零件对象
      searchOrderItem:function (id) {
        this.$http.get("/orderItem/getOrderItemList/"+id).then((res)=>{
          this.searchForm = res.data.result;
        })
      },
      //查询所有原材料
      getMaterialList2:function () {
        this.$http.get("/material/materialList").then((val)=>{
          this.materialList2 = val.data.result
        })
      },
      count:function (index) {
        this.$http.get("/material/getById/"+this.materialList[index].materialId).then((res)=>{
          this.dd = res.data.result.density
          this.price = res.data.result.price
        })
        let spec=this.materialList[index].spec
        let mm=this.num[index].mm;

        let bfLength = this.materialList[index].bfLength
        let bfWidth = this.materialList[index].bfWidth
        let bfHight = this.materialList[index].bfHight
        let bfDiam = this.materialList[index].bfDiam
        if(spec==0){
          if(mm!=null && bfLength!=null && bfWidth!=null && bfHight!=null){
            this.materialList[index].mm=mm
            this.materialList[index].afLength = bfLength
            this.materialList[index].afWidth = bfWidth
            this.materialList[index].afHight = bfHight*mm/this.searchForm.num
            this.materialList[index].afArea=(((bfLength*bfWidth)+(bfLength*this.materialList[index].afHight)+(bfWidth*this.materialList[index].afHight))*2).toFixed(4)
            this.materialList[index].afWeight=bfLength*bfWidth*this.materialList[index].afHight*this.dd/1000000
            this.materialList[index].materCost=(this.materialList[index].afWeight*this.price).toFixed(2);
          }
        }else{
          if(mm!=null && bfHight!=null && bfDiam!=null){
            this.materialList[index].mm=mm
            this.materialList[index].afHight=bfHight*mm/this.searchForm.num;
            this.materialList[index].afDiam=bfDiam;
            this.materialList[index].afArea=((bfDiam/2*bfDiam/2*3.14*2/100)+(bfDiam*3.14*this.materialList[index].afHight/100)).toFixed(4)
            this.materialList[index].afWeight=(((bfDiam/2*bfDiam/2*3.14/100)*this.materialList[index].afHight/10*this.dd)/1000).toFixed(4)
            this.materialList[index].materCost=(this.materialList[index].afWeight*this.price).toFixed(2);
          }
        }

      },
      getProcessLists:function () {
        this.$http.get("/process/processList").then((res)=>{

          this.processList2 = res.data.result
        })
      },
      offer:function () {

        this.materialList.orderItemId=this.orderItemId;
        debugger;
        this.processList.orderItemId=this.orderItemId;
        this.$http.post("/order-material/saveGy",{materialList:this.materialList,processList:this.processList}).then((val)=>{
          if (val.data.success) {
            this.$message.success(val.data.message);
            this.$router.push("/gy")
          }else{
            this.$message.error(val.data.message);
          }
        })
      },
      call:function () {
        this.$router.push("/gy")
      },
      numyz:function (val,contest) {
        if(val!=null && val!=''){
          if(!isNaN(val)){
            this.disoffer=false;
          }else{
            this.disoffer=true;
            this.$message.error("请输入一个数值")
          }
        }else{
          this.disoffer=true;
          this.$message.error(contest+"!");
        }
      }
    },
    mounted() {
      this.orderItemId=this.$route.query.id;

      this.searchOrderItem(this.orderItemId)
      this.getMaterialList2();
      this.getProcessLists();
      if(this.materialList.length==0 && this.processList.length==0){
        this.disoffer=true;
      }
    },

  }
</script>

<style scoped>

</style>
